<template>
  <div class="myorder">
    <van-nav-bar title="我的订单" left-text="返回" fixed left-arrow @click-left="$router.go(-1)" />
    <van-tabs sticky>
      <van-tab title="全部">
        <div class="orderlist">
          <div class="orderlist-one">
            <div class="orderlist-time">2022/02/17 20:46</div>
            <div class="orderlist-status">待支付</div>
          </div>
          <div class="orderlist-two">
            <van-image width="1.9rem" height="1.6rem" :src="require('../../assets/BinMd-img/md-icon.png')" />
            <div class="orderlist-detail">
              <div class="orderlist-detail-left">
                <div class="orderlist-detail-title">私教体验课</div>
                <div class="orderlist-detail-intro">1v1</div>
              </div>
              <div class="orderlist-detail-right">
                <div class="orderlist-detail-price">￥19.9</div>
                <div class="orderlist-detail-count">×1</div>
              </div>
            </div>
          </div>
          <div class="orderlist-total">共计1件商品 | <span>总计:￥19.9</span></div>
          <div class="orderlist-btn">
            <van-button plain color="gray" round size="small">取消订单</van-button>
          </div>
        </div>
      </van-tab>
      <van-tab title="待支付">待支付</van-tab>
      <van-tab title="已支付">已支付</van-tab>
      <van-tab title="售后">售后</van-tab>
    </van-tabs>
  </div>
</template>

<script>
// import { ref } from 'vue'
export default {
  setup() {
    const active = ref(0)
    return { active }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-tabs {
  top: 42px;
}
.myorder {
  height: 700px;
  background: #e7e5e56b;
}
.orderlist {
  background: white;
  width: 340px;
  margin: 15px auto;
  padding: 14px 4px;
  color: #000;
  border-radius: 10px;
}
.orderlist-one {
  display: flex;
  justify-content: space-between;
  color: #666666;
  padding-bottom: 6px;
}
.orderlist-time {
  font-size: 16px;
  margin: 10px;
}
.orderlist-status {
  font-size: 19px;
  margin-right: 6px;
  margin-top: 6px;
}
.orderlist-two {
  display: flex;
}
.van-image {
  margin-left: 10px !important;
}

.orderlist-detail {
  margin-left: 20px;
  width: 230px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.orderlist-detail-title {
  font-size: 16px !important;
}
.orderlist-detail-intro {
  font-size: 13px;
  margin-top: 10px;
}
.orderlist-detail-price {
  font-size: 13px;
}
.orderlist-detail-count {
  font-size: 13px;
  margin-top: 10px;
}
.orderlist-total {
  display: inline-block;
  font-size: 14px;
  margin-top: 20px;
  margin-left: 158px;
  color: #666666;
  > span {
    color: #ff6040;
  }
}
.orderlist-btn {
  display: flex;
  justify-content: flex-end;
  padding: 12px 6px 0px 0px;
}
.van-button {
  display: inline-block;
  border-color: gray !important;
}
</style>

<style>
.orderlist-two .van-image__img,
.van-image__loading {
  /* height: 3.2rem;
  width: 2rem; */
  border-radius: 20% !important;
}
</style>
